<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <p>username: {{username}}</p>
        <p><button @click="username+='!'">更新 username</button></p>
        <p><button @click="toDie">我不想活了</button></p>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            // template:'<div><p @click="fn">username:{{username}}</p></div>',
            data: {
                username:'atguigu',
                age:10
            },
            // 1. beforeCreate: 数据代理和数据劫持之前,此刻，vm身上还没有 _data, vm身上页面有data中的属性，没有methods中的方法
            beforeCreate() {
                console.log('1. beforeCreate', this)
                // debugger;
            },
            // 2. created: 数据代理、数据劫持都已经完成了
            created(){
                console.log('2. created', this)
                // debugger;
            },
            // 3. beforeMount： 挂载之前: 将模板编译成虚拟DOM，此刻虚拟dom还没有转化为真实dom
            beforeMount(){
                console.log('3. beforeMount: ')
                document.querySelector('p').style.color = 'red'
                // debugger;
            },
            //4. mounted: 组件挂载完成：虚拟dom已经转化为了真实dom
            /**
             *  开启定时器\ajax、订阅消息、绑定自定义事件
             */
            mounted(){
                console.log('4. mounted',this)
                // debugger;
            },
            // 5. beforeUpdate: 更新前：此刻数据已经改变，但页面还没有变
            beforeUpdate() {
                console.log('5. beforeUpdate', this)
                console.log(this.username)
                
            },
            // 6. updated：页面更新后执行。
            updated(){
                console.log('6. updated', this)
            },
            // 7. beforeDestroy: 组件销毁之前执行
            /**
             *  1，清除定时器
             *  2. 取消订阅
             *  3. 解绑自定义事件
             */
            beforeDestroy() {
                console.log('7. beforeDestroy')
            },
            // 8. destroyed: 组件销毁。不是销毁的vm，而是断开了vm和容器的联系
            destroyed(){
                console.log('8. destroyed this :', this)
            },
            methods:{
                fn(){
                    console.log(123)
                },
                toDie(){
                    console.log(this)
                    this.$destroy()
                }
            }
            
        })
    </script>
</body>

</html>